<template>
<!-- 子传父 -->
<!-- 1.给子组件绑定自定义属性 -->
  <div>
    <MyProduct 
    v-for="item in list"
    :key="item.id"
    :title="item.title" 
    :price="item.price" 
    :info="msg"
    :id="item.id"
    @kan="kanFn" />
  </div>
</template>

<script>
// 父传子
// 1.给子组件绑定自定义属性
// 2.在子组件内使用props接收数据
// 引入
// 注册
// 使用
import MyProduct from './components/MyProduct.vue'
export default {
 components:{
  MyProduct
 },

  data() {
    return {
      msg:'全家桶超大折扣',
      list:[
        {id:1,title:"肯德基",price:89},
        {id:2,title:"麦当劳",price:79},
        {id:3,title:"华莱士",price:59}
      ]
      
    };
  },

  methods: {
    kanFn(id){
      // console.log('我被触发',id);
      const product  = this.list.find(item => item.id === id)
      product.price -= 10

    }
    
  },
};
</script>

<style lang="scss" scoped>

</style>